<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>js 拾遗 | 前端一锅煮</title>
    <meta name="description" content="js 拾遗">
    <link rel="icon" href="/blog/logo.jpg">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
    <meta name="keywords" content="前端一锅煮,mac,js 拾遗">
    <link rel="preload" href="/blog/assets/css/0.styles.3a36f1f3.css" as="style"><link rel="preload" href="/blog/assets/js/app.2d50d9dc.js" as="script"><link rel="preload" href="/blog/assets/js/16.379721e3.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cf06b472.js"><link rel="prefetch" href="/blog/assets/js/11.57a175c6.js"><link rel="prefetch" href="/blog/assets/js/12.b32f2db2.js"><link rel="prefetch" href="/blog/assets/js/13.818a88b3.js"><link rel="prefetch" href="/blog/assets/js/14.1c54dd87.js"><link rel="prefetch" href="/blog/assets/js/15.40ea867f.js"><link rel="prefetch" href="/blog/assets/js/17.0b8bcd15.js"><link rel="prefetch" href="/blog/assets/js/18.41bb3889.js"><link rel="prefetch" href="/blog/assets/js/19.6362af40.js"><link rel="prefetch" href="/blog/assets/js/2.55dfcea5.js"><link rel="prefetch" href="/blog/assets/js/20.4ce40a8a.js"><link rel="prefetch" href="/blog/assets/js/21.ba4dcc65.js"><link rel="prefetch" href="/blog/assets/js/22.d2fad5dd.js"><link rel="prefetch" href="/blog/assets/js/23.2a976f6d.js"><link rel="prefetch" href="/blog/assets/js/24.a6407b77.js"><link rel="prefetch" href="/blog/assets/js/25.28818591.js"><link rel="prefetch" href="/blog/assets/js/26.a4d6759f.js"><link rel="prefetch" href="/blog/assets/js/27.fe72fdf4.js"><link rel="prefetch" href="/blog/assets/js/28.ca4a85a9.js"><link rel="prefetch" href="/blog/assets/js/29.4c6c0c28.js"><link rel="prefetch" href="/blog/assets/js/3.e235257b.js"><link rel="prefetch" href="/blog/assets/js/30.6aa9a972.js"><link rel="prefetch" href="/blog/assets/js/31.b7bccc14.js"><link rel="prefetch" href="/blog/assets/js/32.3544b6a6.js"><link rel="prefetch" href="/blog/assets/js/33.3bb697fd.js"><link rel="prefetch" href="/blog/assets/js/34.ac7cecf3.js"><link rel="prefetch" href="/blog/assets/js/35.b26fe96f.js"><link rel="prefetch" href="/blog/assets/js/36.91eb88f8.js"><link rel="prefetch" href="/blog/assets/js/37.baa3c248.js"><link rel="prefetch" href="/blog/assets/js/4.04108111.js"><link rel="prefetch" href="/blog/assets/js/5.2e3bc3e6.js"><link rel="prefetch" href="/blog/assets/js/6.88208dc4.js"><link rel="prefetch" href="/blog/assets/js/7.7913f494.js"><link rel="prefetch" href="/blog/assets/js/8.64ff3aa5.js"><link rel="prefetch" href="/blog/assets/js/9.43d70a25.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.3a36f1f3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">前端一锅煮</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>js 拾遗</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/blog/page/list/base_summary.html#date" class="sidebar-link">Date</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#regexp" class="sidebar-link">RegExp</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#json-stringify" class="sidebar-link">JSON.stringify</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#error" class="sidebar-link">Error</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#array" class="sidebar-link">Array</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#number" class="sidebar-link">Number</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#math" class="sidebar-link">Math</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#string" class="sidebar-link">String</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#事件循环" class="sidebar-link">事件循环</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#严格模式" class="sidebar-link">严格模式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#flex" class="sidebar-link">Flex</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#babel" class="sidebar-link">Babel</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#webpack" class="sidebar-link">Webpack</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#快速排序、冒泡排序" class="sidebar-link">快速排序、冒泡排序</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/base_summary.html#斐波那契数列" class="sidebar-link">斐波那契数列</a><ul class="sidebar-sub-headers"></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="js-拾遗"><a href="#js-拾遗" class="header-anchor">#</a> js 拾遗</h1> <p>最近复习 <a href="https://wangdoc.com/javascript/" target="_blank" rel="noopener noreferrer">JavaScript 教程<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，发现好多没记住的，特以此记~</p> <h2 id="date"><a href="#date" class="header-anchor">#</a> Date</h2> <p>Dtae() 和 new Date() 区别，Date() 函数不能带参数，属于静态方法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">1</span> <span class="token operator">===</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取时间戳</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> m<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取这个月有多少天，传入年份和月份</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> m<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取这个月最后一天是星期几</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> m<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取这个月第一天是星期几</span>
</code></pre></div><h2 id="regexp"><a href="#regexp" class="header-anchor">#</a> RegExp</h2> <p>. 点字符匹配除回车(\r)、换行(\n) 、行分隔符(\u2028)和段分隔符(\u2029)以外的所有字符</p> <p>[^] 表示匹配一切字符，其中包括换行符</p> <p><code>str.replace(/2/gi, '1')</code> 第二个参数可以使用美元符号$，用来指代所替换的内容</p> <div class="language-js extra-class"><pre class="language-js"><code>$<span class="token operator">&amp;</span>：匹配子字符串
$<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">：匹配结果前面的文本
$'：匹配结果后面的文本
$n：匹配成功的第n组内容，n是从1开始的自然数。
$$：指代美元符号$。
'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
// &quot;world hello&quot;
'abc'.replace('b', '[$</span><span class="token template-punctuation string">`</span></span><span class="token operator">-</span>$<span class="token operator">&amp;</span><span class="token operator">-</span>$\<span class="token string">']'</span><span class="token punctuation">)</span>
<span class="token comment">// &quot;a[a-b-c]c&quot;</span>
</code></pre></div><h2 id="json-stringify"><a href="#json-stringify" class="header-anchor">#</a> JSON.stringify</h2> <p><code>console.log(JSON.stringify(obj, null, 2))</code> 接受三个参数，打印对象格式化</p> <ul><li><p>参数一<br>
如果对象的属性是<code>undefined</code>、函数或 <code>XML</code> 对象，该属性会被<code>JSON.stringify</code>过滤<br>
如果数组的成员是<code>undefined</code>、函数或 <code>XML</code> 对象，则这些值被转成<code>null</code><br>
正则对象会被转成空对象<br>
忽略对象的不可遍历的属性</p></li> <li><p>参数二<br>
接受一个数组，作为第二个参数，指定需要转成字符串的属性，只对对象的属性有效<br>
还可以是一个函数，用来更改<code>JSON.stringify</code>的返回值</p></li> <li><p>参数三<br>
如果是数字，表示每个属性前面添加的空格（最多不超过10个）<br>
如果是字符串（不超过10个字符），则该字符串会添加在每行前面<br> <code>JSON.stringify</code>发现参数对象有toJSON方法，就直接使用这个方法的返回值作为参数，而忽略原对象的其他参数</p></li></ul> <h2 id="error"><a href="#error" class="header-anchor">#</a> Error</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 抛出一个错误</span>
<span class="token keyword">new</span> <span class="token class-name">SyntaxError</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 语法解析错误</span>
<span class="token keyword">new</span> <span class="token class-name">ReferenceError</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 非法或不能识别的引用值，使用未声明的变量</span>
<span class="token keyword">new</span> <span class="token class-name">TypeError</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 操作类型错误，使用自身没有的方法，let a = 22 a.sort() a 是 Number 类型而非数组</span>
<span class="token keyword">new</span> <span class="token class-name">RangeError</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 数值越界，Maximum call stack，调用一个不终止的递归函数，计算的值超出最大范围</span>
<span class="token keyword">new</span> <span class="token class-name">URIError</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// encodeURIComponent() encodeURI() 等URI函数使用错误</span>
</code></pre></div><h2 id="array"><a href="#array" class="header-anchor">#</a> Array</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">'a'</span> <span class="token keyword">in</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span> 
<span class="token keyword">for</span> <span class="token keyword">in</span> <span class="token keyword">for</span> <span class="token keyword">of</span> 
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> 分离成两个数组 <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span> 
</code></pre></div><p><code>es6</code> 明确把空位转成 <code>undefined</code> <code>es5</code> 有的跳过(<code>forEach、filter、reduce、some、every</code>)<br> <code>map()</code> 会跳过空位，但会保留这个值<br> <code>join()</code> 和 <code>toString()</code> 会将空位视为 <code>undefined</code> ，而 <code>undefined</code> 和 <code>null</code> 会被处理成空字符串</p> <h2 id="number"><a href="#number" class="header-anchor">#</a> Number</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">rand</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token keyword">let</span> seed <span class="token operator">=</span> <span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1</span><span class="token punctuation">;</span>
    seed <span class="token operator">=</span> <span class="token punctuation">(</span>seed <span class="token operator">*</span> <span class="token number">9301</span> <span class="token operator">+</span> <span class="token number">49297</span><span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">233280</span><span class="token punctuation">;</span> <span class="token comment">// 为何使用这三个数?</span>
    <span class="token keyword">let</span> rc <span class="token operator">=</span> seed <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">233280.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>rc <span class="token operator">*</span> num<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">rand</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token comment">// 取1~10的随机数</span>

<span class="token number">0</span> <span class="token operator">/</span> <span class="token number">0</span> <span class="token number">NaN</span> 
<span class="token number">0</span> <span class="token operator">/</span> <span class="token number">1</span> <span class="token number">0</span> 
<span class="token number">1</span> <span class="token operator">/</span> <span class="token number">0</span> <span class="token number">Infinity</span>

es6 分别用前缀 <span class="token number">0</span>b <span class="token number">0</span>o <span class="token number">0</span>x 表示 <span class="token number">2</span> <span class="token number">8</span> <span class="token number">16</span> 进制

base64 
    <span class="token number">0</span><span class="token operator">~</span><span class="token number">9</span> a<span class="token operator">~</span>z <span class="token constant">A</span><span class="token operator">~</span><span class="token constant">Z</span> <span class="token string">'+'</span> <span class="token string">'/'</span>    <span class="token number">10</span> <span class="token operator">+</span> <span class="token number">26</span> <span class="token operator">+</span> <span class="token number">26</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">=</span> <span class="token number">64</span>
    不足补\<span class="token function">x00</span><span class="token punctuation">(</span>零值字节<span class="token punctuation">)</span>，然后在末尾加上<span class="token number">1</span>个或<span class="token number">2</span>个<span class="token operator">=</span>号，表示补了多少个零值字节
</code></pre></div><p><code>Number.MAX_SAFE_INTEGER</code> 9007199254740991 表示能够精确表示的最大整数<br> <code>Number.MIN_SAFE_INTEGER</code> -9007199254740991 表示能够精确表示的最小整数</p> <h2 id="math"><a href="#math" class="header-anchor">#</a> Math</h2> <p>ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法，只能在 Math 对象上调用</p> <div class="language-js extra-class"><pre class="language-js"><code>Math<span class="token punctuation">.</span><span class="token function">trunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 去除一个数的小数部分，返回整数部分</span>
Math<span class="token punctuation">.</span><span class="token function">trunc</span><span class="token punctuation">(</span><span class="token number">4.1</span><span class="token punctuation">)</span> <span class="token comment">// 4</span>
Math<span class="token punctuation">.</span><span class="token function">trunc</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">4.1</span><span class="token punctuation">)</span> <span class="token comment">// -4</span>
Math<span class="token punctuation">.</span><span class="token function">hypot</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 5 返回所有参数的平方和的平方根</span>
Math<span class="token punctuation">.</span><span class="token function">cbrt</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span> <span class="token comment">// 2 计算一个数的立方根</span>

es6 新增指数运算符 <span class="token number">2</span> <span class="token operator">**</span> <span class="token number">2</span> <span class="token operator">**</span> <span class="token number">2</span> <span class="token operator">=&gt;</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span>
这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。

<span class="token string">'hello'</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token comment">// &quot;e&quot; 直接对字符串使用方括号运算符，仅能获取操作</span>
</code></pre></div><h2 id="string"><a href="#string" class="header-anchor">#</a> String</h2> <p>substring 类似slice，但是使用规则违反直觉，因此不建议使用substring方法，应该优先使用slice</p> <div class="language-js extra-class"><pre class="language-js"><code>str<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 下标</span>
str<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 十进制 Unicode 码点</span>
String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span><span class="token number">97</span><span class="token punctuation">)</span> <span class="token comment">// 逆操作</span>
str<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 从零开始取4个</span>
str<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
str<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span>
str1<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span> <span class="token comment">// Unicode 码点比较大小</span>
</code></pre></div><h2 id="事件循环"><a href="#事件循环" class="header-anchor">#</a> 事件循环</h2> <p><a href="https://www.cnblogs.com/jiasm/p/9482443.html" target="_blank" rel="noopener noreferrer">参考文章<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-js extra-class"><pre class="language-js"><code>宏任务                   浏览器 Node
<span class="token constant">I</span><span class="token operator">/</span><span class="token constant">O</span>                     ✅   ✅
setTimeout              ✅   ✅
setInterval             ✅   ✅
setImmediate            ❌   ✅
requestAnimationFrame   ✅   ❌

微任务                   浏览器 Node
process<span class="token punctuation">.</span>nextTick        ❌   ✅
MutationObserver        ✅   ❌
Promise<span class="token punctuation">.</span>then            ✅   ✅
</code></pre></div><h2 id="严格模式"><a href="#严格模式" class="header-anchor">#</a> 严格模式</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token number">1.</span> 变量必须显示声明
<span class="token number">2.</span> 禁用 <span class="token keyword">with</span>
<span class="token number">3.</span> 禁止删除变量 <span class="token comment">// delete x =&gt; 语法错误 </span>
<span class="token number">4.</span> 禁用 fn<span class="token punctuation">.</span>caller fn<span class="token punctuation">.</span>arguments <span class="token comment">// 报错 </span>
<span class="token number">5.</span> 对象不能有重名的属性
<span class="token number">6.</span> 函数不能有重名的参数
<span class="token number">7.</span> 禁止八进制表示法 <span class="token comment">// 02 </span>
</code></pre></div><h2 id="flex"><a href="#flex" class="header-anchor">#</a> Flex</h2> <p><code>flex-grow flex-shrink flex-basis</code> 放大 缩小占据的空间大小</p> <div class="language-js extra-class"><pre class="language-js"><code>flex<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span> auto<span class="token punctuation">;</span> <span class="token comment">// 默认 </span>
flex<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span> auto<span class="token punctuation">;</span> <span class="token comment">// flex: none;</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">1</span> auto<span class="token punctuation">;</span> <span class="token comment">// flex: auto;</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">1</span> <span class="token number">0</span><span class="token operator">%</span><span class="token punctuation">;</span> <span class="token comment">// flex: 1;</span>
</code></pre></div><h2 id="babel"><a href="#babel" class="header-anchor">#</a> Babel</h2> <p>AST 抽象语法树</p> <div class="language-js extra-class"><pre class="language-js"><code>babel<span class="token operator">-</span>core 
    通过 babylon 把 es6 解析成 <span class="token constant">AST</span>
    babel<span class="token operator">-</span>traverse 对 <span class="token constant">ATS</span>树进行遍历转译得到新的 <span class="token constant">AST</span>树 
    babel<span class="token operator">-</span>generator 读取 <span class="token constant">AST</span>树并将其转换为代码和源码映射

对于新的 <span class="token constant">API</span>、新的属性，两种处理方式
    babel<span class="token operator">-</span>polyfill 把 es6环境整体引入到代码中
        regenerator<span class="token operator">-</span>runtime、core<span class="token operator">-</span>js 

    babel<span class="token operator">-</span>plugin<span class="token operator">-</span>transform<span class="token operator">-</span>runtime 按需引入
        babel<span class="token operator">-</span>runtime 
            regenerator<span class="token operator">-</span>runtime、core<span class="token operator">-</span>js 
        babel<span class="token operator">-</span>helpers 只引入单个，通过此插件可以把多次引入变成一个，减少代码体积
</code></pre></div><h2 id="webpack"><a href="#webpack" class="header-anchor">#</a> Webpack</h2> <p>把项目看成一个整体，通过给定的主文件，webpack 从这个主文件的入口开始找到项目中的所有依赖文件，然后使用
各种 loader 转化、插件处理、文件处理，最后打包输出到一个指定的文件夹中</p> <p>webpack 打包优化措施</p> <div class="language-js extra-class"><pre class="language-js"><code>webpack<span class="token punctuation">.</span>DllPlugin 拆分固定死的依赖文件，因为不会变化所以可以预先打包好，后面直接引用
HappyPack 多进程，默认开启三个
babel<span class="token operator">-</span>loader 开启缓存 cacheDirectory<span class="token punctuation">:</span> <span class="token boolean">true</span> 
exclude include 
noParse<span class="token punctuation">:</span> <span class="token regex">/^(vue|vue-router|vuex|vuex-router-sync|axios)$/</span>
css 用 contenthash
    hash 每次构建都会变
    chunkhash <span class="token punctuation">.</span>vue 文件变了就会变
    contenthash 只有 css 变了才会变
</code></pre></div><h2 id="快速排序、冒泡排序"><a href="#快速排序、冒泡排序" class="header-anchor">#</a> 快速排序、冒泡排序</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fast</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 快速排序</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">&lt;=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 终止递归条件</span>
        <span class="token keyword">return</span> arr
    <span class="token punctuation">}</span>
    
    <span class="token keyword">let</span> index <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 获取中间值下标</span>
    <span class="token keyword">let</span> val <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 删除且获取返回值</span>
    <span class="token keyword">let</span> left <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token keyword">let</span> right <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>

    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 数组长度已经发生变化</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&lt;</span> val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            left<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 小的放左边</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            right<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 大的放右边</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token function">fast</span><span class="token punctuation">(</span>left<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span>val<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function">fast</span><span class="token punctuation">(</span>right<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 合并数组</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">maop</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 冒泡排序</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> flag <span class="token operator">=</span> <span class="token number">0</span> 

        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> len <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">&gt;</span> arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">let</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span>
                arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span>
                arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp 
                flag <span class="token operator">=</span> <span class="token number">1</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">if</span> <span class="token punctuation">(</span>flag <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> arr
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="斐波那契数列"><a href="#斐波那契数列" class="header-anchor">#</a> 斐波那契数列</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 性能最好</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token keyword">let</span> res1 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> res2 <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> sum <span class="token operator">=</span> res2 
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> n<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        sum <span class="token operator">=</span> res1 <span class="token operator">+</span> res2
        res1 <span class="token operator">=</span> res2 
        res2 <span class="token operator">=</span> sum 
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> sum
<span class="token punctuation">}</span>

<span class="token comment">// 把算过的存起来</span>
<span class="token keyword">var</span> cache <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token keyword">if</span> <span class="token punctuation">(</span>n <span class="token operator">&lt;=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        cache<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span>
        <span class="token keyword">return</span> <span class="token number">1</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>cache<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> cache<span class="token punctuation">[</span>n<span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
    cache<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">add</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> cache<span class="token punctuation">[</span>n<span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// 最简单，但是性能不行</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>n <span class="token operator">&lt;=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token number">1</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token function">add</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">add</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div class="page-edit"><div class="edit-link"><a href="https://gitee.com/cjm0/blog/edit/master/docs/page/list/base_summary.md" target="_blank" rel="noopener noreferrer">在 Gitee 上编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <!----> </div> <!----></div></div>
    <script src="/blog/assets/js/app.2d50d9dc.js" defer></script><script src="/blog/assets/js/16.379721e3.js" defer></script>
  </body>
</html>
